<template>
  <div class="home">
    <div class="home-nav">
      <div class="home-title">
        <span>营业时间</span>
        <div class="home-time">
          <span>早上 10:00 - 晚上 22:00</span>
        </div>
      </div>
      <van-nav-bar>
        <template #left>
          <div class="home-bar">
            <span class="bar-title">欢迎回来</span>
            <span class="oneText">{{userInfo.nickName}}</span>
          </div>
        </template>
        <!-- <template #right>
          <van-search
            v-model="value"
            placeholder="请输入搜索关键词"
            shape="round"
          />
        </template> -->
      </van-nav-bar>
    </div>
    <div class="home-banner">
      <van-swipe class="my-swipe" :autoplay="3000" @change="changeIndex">
        <van-swipe-item v-for="(item, index) in bannerData" :key="index">
          <img class="autoImg" :src="item.bannerImg" />
          <div class="imgTitle">
            <span>{{ item.name }}</span>
          </div>
        </van-swipe-item>
        <template #indicator>
          <div class="banner-indicator">
            <div
              class="banner-item"
              :class="{ active: currentIndex === i }"
              v-for="(v, i) in bannerData.length"
              :key="i"
            ></div>
          </div>
        </template>
      </van-swipe>
    </div>
    <div class="home-gird">
      <van-grid :column-num="3" gutter="10px">
        <van-grid-item to="/Hot">
          <div class="home-hot home-gird-box">
            <img class="autoImg" src="../assets/images/hot.png" alt="" />
          </div>
          <span>热销</span>
        </van-grid-item>
        <van-grid-item to="/Menu">
          <div class="home-cofe home-gird-box">
            <img class="autoImg" src="../assets/images/kafei.png" alt="" />
          </div>
          <span>咖啡</span>
        </van-grid-item>
        <van-grid-item @click="expecting">
          <div class="home-sub home-gird-box">
            <img class="autoImg" src="../assets/images/yinliao.png" alt="" />
          </div>
          <span>碎冰冰</span>
        </van-grid-item>
        <van-grid-item @click="expecting">
          <div class="home-gd home-gird-box">
            <img class="autoImg" src="../assets/images/gaodian.png" alt="" />
          </div>
          <span>糕点</span>
        </van-grid-item>
        <van-grid-item @click="expecting">
          <div class="home-ck home-gird-box">
            <img class="autoImg" src="../assets/images/quqi.png" alt="" />
          </div>
          <span>曲奇</span>
        </van-grid-item>
        <van-grid-item @click="expecting">
          <div class="home-jus home-gird-box">
            <img class="autoImg" src="../assets/images/guozhi.png" alt="" />
          </div>
          <span>果汁</span>
        </van-grid-item>
      </van-grid>
    </div>
    
  </div>
</template>

<script>
import "../assets/less/home.less";
import Hotlist from "../components/Hotlist";
export default {
  name: "Home",
  data() {
    return {
      value: "",
      currentIndex: 0,
      isPrice:false,
      bannerData: [],
      hotListData:[],
      userInfo:{}
    };
  },
  created() {
    this.getBannerData();
    this.getHotListData();
    this.getUserInfo();
  },
  components: {
    Hotlist,
  },
  methods: {
    changeIndex(index) {
      this.currentIndex = index;
    },
    expecting(){
      this.$toast({
              message: '敬请期待',
              forbidClick: true,
              duration: 1000,
      });
    },
    getBannerData() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.axios({
        method: "GET",
        url: this.baseUrl + "/banner",
        params: {
          appkey: this.appkey,
        },
      })
        .then((res) => {
          //   console.log("res ==> ", res);
          this.$toast.clear();
          if (res.data.code == 300) {
            this.bannerData = res.data.result;
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },
    getHotListData() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.axios({
        method: "GET",
        url: this.baseUrl + "/typeProducts",
        params: {
          appkey: this.appkey,
          key:'isHot',
          value:1
        },
      })
        .then((res) => {
            // console.log("res ==> ", res);
          this.$toast.clear();
          if (res.data.code == 500) {
            this.hotListData = res.data.result;
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },
    getUserInfo() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return;
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "GET",
        url: this.baseUrl + "/findAccountInfo",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((res) => {
          // console.log("res getUserInfo ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return ;
          }
          if (res.data.code === "B001") {
            this.userInfo = res.data.result[0];
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    
    menu(){
      this.$router.push({name:"Menu"})
    }
  },
  
};
</script>